<template>
  <div class="httpRequest page-container mini-padding">
    <h1 class="mini-margin">内置常用请求方法</h1><br>
    <h2 class="mini-margin">&nbsp;&nbsp; 文件路径 src/utils/HttpRequest.ts</h2>
    <a-button type="primary" class="mini-margin" @click="getHttp()">get请求</a-button>
    <a-button type="primary" class="mini-margin" @click="postHttp()">post请求</a-button>
    <a-button type="primary" class="mini-margin" @click="putHttp()">put请求</a-button>
    <a-button type="primary" class="mini-margin" @click="deleteHttp()">delete请求</a-button>
    <a-button type="primary" class="mini-margin">请求拦截</a-button>
    <a-button type="primary" class="mini-margin">响应拦截</a-button>
    <h2 class="mini-margin">使用说明</h2>
    <pre style="font-size: 14px;">
      <h3>1. 引入</h3>
      import { HttpRequest } from '@/utils/index'
      <h3>2. 初始化一个或多个请求对象  --接受一个baseUrl属性</h3>
      let http = new HttpRequest('http://xxx.com/')
      let http2 = new HttpRequest('http://xxx2.com/')
      <h3>2. get请求, post请求, put请求, delete请求</h3>
          --参数url  必填  string类型  请求路径(此url会和初始化时baseUrl进行拼接)
          --参数config  选填  IRequestConfigType类型  请求参数配置 请求头配置
      <h4>   使用示例</h4>
      http.get('test', { params: { a: 1 } })
      http.post('test', { data: { a: 1 } })
      http.put('test/1', { data: { a: 1 } })
      http.delete('test')
      <h3>3. 请求拦截和响应拦截</h3>
          --参数callback  必填  Function类型  拦截成功 回调函数
          --参数errFunction  选填  Function类型  捕捉错误 回调函数
      <h4>   使用示例</h4>
      http.interceptorsReq((request: any) => {
        // 请求前做些什么事
        return request
      }, (err: any) => {
      })

      http.interceptorsRes((response: any) => {
        // 响应前做些什么事
        return response
      }, (err: any) => {
      })
    </pre>
  </div>
</template>

<script lang='ts' setup>
import { HttpRequest } from '@/utils';

let http = new HttpRequest('http://baidu.com/')
let getHttp = async () => {
  let res = await http.get('test', { params: { a: 1 }, headers: { aa: 11 } })
  let res2 = await http.get('test')
}

let postHttp = async () => {
  let res = await http.post('test', { data: { a: 1 }, headers: { aa: 11 }, params: { a: 1 } })
  let res2 = await http.post('test')
}

let putHttp = async () => {
  let res = await http.put('test', { data: { a: 1 }, headers: { aa: 11 }, params: { a: 1 } })
  let res2 = await http.put('test')
}

let deleteHttp = async () => {
  let res = await http.delete('test', { params: { a: 1 }, data: { b: 2 }, headers: {} })
  let res2 = await http.delete('test')
}

</script>

<style scoped lang='scss'>
.httpRequest{}
</style>